<template>
    <el-card class="layout-card-container" shadow="never">
        <template #header>
            <div class="card-header">
                <div class="card-header-left">
                    <div class="title">推广活动明细</div>
                    <el-tooltip effect="dark" popper-class="group-statistics-desc-tootip" placement="right-start">
                        <template #content>
                            <browse-tootip-desc />
                        </template>
                        <span class="title-label-text-icon">
                            <el-icon color="#ccc" size="16"><QuestionFilled /></el-icon>
                        </span>
                    </el-tooltip>
                </div>
                <div class="card-header-right">
                    <div class="tabs-wrap">
                        <!-- <div
                            class="tabs-item"
                            :class="{ active: tabsActiveName == 'employee' }"
                            @click="handleCLickTabItem('employee')">
                            按员工
                        </div>
                        <div
                            class="tabs-item"
                            :class="{ active: tabsActiveName == 'product' }"
                            @click="handleCLickTabItem('product')">
                            按商品
                        </div>
                        <div
                            class="tabs-item"
                            :class="{ active: tabsActiveName == 'promotionLink' }"
                            @click="handleCLickTabItem('promotionLink')">
                            按推广链接
                        </div> -->
                    </div>
                </div>
            </div>
        </template>
        <PromotionalTable :type="tabsActiveName"></PromotionalTable>
    </el-card>
</template>

<script setup>
import { ref } from 'vue';
import BrowseTootipDesc from './components/browse-tootip-desc.vue';
import PromotionalTable from './components/PromotionalTable.vue';

const tabsActiveName = ref('promotionLink');
/**
 * tab 切换事件
 */
const handleCLickTabItem = name => {
    tabsActiveName.value = name;
};
</script>

<style lang="scss" scoped>
@import './style/index';
</style>
